<template>
  <Detail-dialog
    modal
    width="45"
    :title="title"
    :show.sync="dialogShow" @close="close" @save="save('dataForm')">
        <el-form ref="dataForm" label-width="90px" :model="relationEmp" :rules="rules">
              <el-row>
                <el-col :span="24">
                    <div style="margin-bottom:20px;">职位：<span class="position-desc">{{positionInfo.positionName}}</span>所属部门：<span class="position-desc">{{positionInfo.departmentName}}</span></div>
                </el-col>
              </el-row>
              <el-row>
                  <el-col :span="12">
                    <el-form-item label="选择员工" prop="selectEmpInfoList">
                    <el-select multiple  filterable  clearable style="width:400px" v-model="relationEmp.selectEmpInfoList" placeholder="选择员工">
                      <el-option
                        v-for="(item,index) in employeeInfoList"
                      :key="index" :label="item.employeeName"  :value="item.employeeCode">
                              <span style="float: left">{{ item.employeeName }}</span>
                         <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mainDepartmentName }}</span>
                      </el-option>
                    </el-select>
                    </el-form-item>
                  </el-col>
              </el-row>
        </el-form>
  </Detail-dialog>
</template>
<script>
import DetailDialog from '@/components/DetailDialog'
import employee from '@/api/system/employeeAPI'
export default {
  props: {
    title: String,
    visible: Boolean,
    data: {type: Object,
      default: () => {
        return {}
      }}
  },
  components: {DetailDialog},
  watch: {
    visible: {
      handler (val) {
        this.relationEmp = {}
        this.dialogShow = val
      },
      immediate: true
    },
    dialogShow (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          this.positionInfo = {...val}
        }
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      dialogShow: false,
      positionInfo: {},
      relationEmp: {},
      employeeInfoList: [],
      rules: {
        selectEmpInfoList: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.getEmployeeList()
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    getEmployeeList (param) {
      employee.getEmployeeListAPI(param).then(res => {
        this.employeeInfoList = res.data.list || []
      })
    },
    save (form) {
      this.$refs[form].validate(validate => {
        if (validate) {
          if (!this.positionInfo.positionCode) {
            this.$msgBox.error('职位编码不存在')
            return
          }
          const dataList = this.relationEmp.selectEmpInfoList
          const result = dataList.map(v => {
            return {positionCode: this.positionInfo.positionCode, employeeCode: v, status: 1}
          })
          employee.addEmployeePositonAPI(result).then(res => {
            this.$msgBox.success('保存成功', () => {
              this.close()
              this.$emit('afterSave', res)
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.position-desc{
  padding: 10px;
  font-weight: 600;
}
</style>
